<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>gCodeViewer</title>
    <meta name="description" content="Visual GCode viewer and analyzer in your browser. No need to upload you GCode anywhere, everything is done locally.">
    <link rel="stylesheet" type="text/css" href="css/cupertino/jquery-ui-1.9.0.custom.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="lib/codemirror.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
    <script type="text/javascript" src="lib/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="lib/jquery-ui-1.9.0.custom.js"></script>

    <script type="text/javascript" src="lib/codemirror.js"></script>
    <script type="text/javascript" src="lib/mode_gcode/gcode_mode.js"></script>
    <script type="text/javascript" src="lib/three.js"></script>
    <script type="text/javascript" src="lib/bootstrap.js"></script>
    <script type="text/javascript" src="lib/modernizr.custom.09684.js"></script>
    <script type="text/javascript" src="lib/TrackballControls.js"></script>
    <script type="text/javascript" src="js/ui.js"></script>
    <script type="text/javascript" src="js/gCodeReader.js"></script>
    <script type="text/javascript" src="js/renderer.js"></script>
    <script type="text/javascript" src="js/renderer3d.js"></script>

</head>
<body>

<div id="dialog-modal" title="Basic modal dialog" style="display: none;">
    Generating 3d model<br>
    <div id="progressbar"></div>
</div>

<div id="wrap" class="ui-widget ui-widget-content ui-corner-all">
    <div id="control">
        <center><img src="img/logo.png" /></center>

        <div id="accordion2" class="accordion">
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#fileAccordionTab">
                        Select GCode file
                    </a>
                </div>
                <div id="fileAccordionTab" class="accordion-body collapse">
                    <div class="accordion-inner">
                        <input type="file" id="file" name="files" />
                        <!--<form class="add-teacher" id="fAddTeacher" enctype="multipart/form-data" method="post" novalidate="novalidate">-->
                        <!--<button id="selectFileButton">Select GCode File</button>-->
                        <!--</form>-->
                        <div id="drop_zone">Drop file here</div>
                    </div>
                </div>
            </div>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#progressAccordionTab">
                        Progress indicators
                    </a>
                </div>
                <div id="progressAccordionTab" class="accordion-body collapse">
                    <div class="accordion-inner">
                        <div id="progressBlock">
                            <div class="progress" >
                                <div id="loadProgress" class="bar" style="width: 0%;"></div>
                            </div>
                            <div class="progress" >
                                <div id="analyzeProgress" class="bar" style="width: 0%;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#infoAccordionTab">
                        Model info
                    </a>
                </div>
                <div id="infoAccordionTab" class="accordion-body collapse">
                    <div class="accordion-inner">
                        <p id="list"></p>
                    </div>
                </div>
            </div>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#layerAccordionTab">
                        Layer Info
                    </a>
                </div>
                <div id="layerAccordionTab" class="accordion-body collapse">
                    <div class="accordion-inner">
                        <p id="layerInfo"></p>
                    </div>
                </div>
            </div>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#options2DAccordionTab">
                        2D Render options
                    </a>
                </div>
                <div id="options2DAccordionTab" class="accordion-body collapse">
                    <div class="accordion-inner">
                        <input type="checkbox" id="showMovesCheckbox" value="1"  onclick="GCODE.ui.processOptions()" checked>Show non-extrusion moves</input><br>
                        <input type="checkbox" id="showRetractsCheckbox" value="2"  onclick="GCODE.ui.processOptions()" checked>Show retracts and restarts</input><br>
                        <input type="checkbox" id="moveModelCheckbox" value="3"  onclick="GCODE.ui.processOptions()" checked>Move model to the center of the grid</input><br>
                        <input type="checkbox" id="differentiateColorsCheckbox" value="7"  onclick="GCODE.ui.processOptions()" checked>Show different speeds with different colors</input><br>
                    </div>
                </div>
            </div>

            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#analyzeOptionsAccordioinTab">
                        GCode analyzer options
                    </a>
                </div>
                <div id="analyzeOptionsAccordioinTab" class="accordion-body collapse">
                    <div class="accordion-inner">
                        These require re-analyzing file:<br>
                        <input type="checkbox" id="sortLayersCheckbox" value="4" onclick="GCODE.ui.processOptions()" checked>Sort layers by Z</input><br>
                        <input type="checkbox" id="purgeEmptyLayersCheckbox" value="5"  onclick="GCODE.ui.processOptions()" checked>Hide empty layers</input><br>
                        <input type="checkbox" id="showGCodeCheckbox" value="6" onclick="GCODE.ui.processOptions()" checked>Show GCode in GCode tab (memory intensive!)</input><br>
                    </div>
                </div>
            </div>

        </div>
        <output id="errorList"></output>


    </div>
    <div id="gcode">
        <div id="tabs-min" class="tabbable">
            <ul id="myTab" class="nav nav-tabs">
                <li class="active"><a href="#tab2d" data-toggle="tab">2D</a></li>
                <li class=""><a href="#tab3d" data-toggle="tab">3D</a></li>
                <li class=""><a href="#tabGCode" data-toggle="tab">GCode</a></li>
                <li class=""><a href="#tabAbout" data-toggle="tab">About</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab2d">
                    <canvas id="canvas" width="650" height="620"></canvas>
                    <div id="slider-vertical"></div>
                    <div id="slider-horizontal"></div>
                </div>
                <div class="tab-pane" id="tab3d">
                    <div id="3d_container"></div>
                </div>
                <div class="tab-pane" id="tabGCode">
                    <div id="gCodeContainer"></div>
                </div>
                <div class="tab-pane" id="tabAbout">
                    <div class="aboutpage">
                        <h2><center>gCodeViewer</center></h2>
                        <b>gCodeViewer</b> is a visual GCode analyzer in your own browser! It works on any OS in almost any modern browser (chrome, ff, safari 6, opera, ie10 should work too). All you need to do - is drag your *.gcode file to the designated zone.<br><br>
                        Current features include:<br>
                        <ul>
                        <li>Visualize GCode in 2D, layer by layer</li>
                            <ul>
                        <li>Show retracts and restarts</li>
                        <li>Show print/move/retract speeds</li>
                        <li>Display only part of layer, animate sequence of layer printing</li>
                            </ul>
                        <li>Analyze GCode</li>
                            <ul>
                        <li>Print time, amount of plastic used, layer height, etc. for whole file and for single layer</li>
                        <li>Reference visualized part to GCode file (i.e. select a certain part of 2d visualization, switch to GCode view - it will highlight list of lines responsible for visualized piece)</li>
                            </ul>
                        <li>Multiplatform, available online (but works offline too), works locally (doesn't upload you g-code anywhere or download anything but application itself)</li>
                        <li>3D visualization (I don't know what for, it's dull and useless.. need to rewrite it to be like in repetier host)</li>
                        <li>And yeah, it's slow, memory hungry and only supports modern browsers</li>
                        <li>Totally open source so you can use it as you like</li>
                        </ul><br><br>
                        All sources are available at <a href="https://github.com/hudbrog/gCodeViewer">https://github.com/hudbrog/gCodeViewer</a><br>
                        If you find any bugs or have feature requests - don't hesitate to post them to <a href="https://github.com/hudbrog/gCodeViewer/issues">https://github.com/hudbrog/gCodeViewer/issues</a><br>
                        And I would appreciate if you like it on Thingiverse page: <a href="http://www.thingiverse.com/thing:35248">http://www.thingiverse.com/thing:35248</a><br>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<script>
    window.onload = GCODE.ui.initHandlers;
</script>

</body>
</html>